<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js" type="application/javascript"></script>

</head>
<body>

    <div id="app">
        <cp1></cp1>
        <cp1></cp1>
        <cp1></cp1>
    </div>
    <script>

        // 全局注册组件 Vue.component(组件名称,组件的配置)
        // 组件的事情组件内部解决 组件的作用域
        Vue.component('cp1',{
            // tempalate 字符串模板  组件最终要渲染的内容
            template:`<div> 
                            我是一个头部 {{ ct }} 
                            <button @click="fn1">我是一个按钮</button>
                     </div>`,
            // 自定义组件的data只能写成一个函数返回一个对象的形式
            // 因为每个组件需要独立的维护自己的状态 
            data(){
                return { 
                    ct:1
                }
            },
            methods:{
                fn1(){
                    console.log('我是 cp1组件的 fn1')
                }
            }
        })

        // el data  computed watch  methods  filters
        new Vue({
            el: '#app',
            data:{
                ct:555
            },
            methods:{
                fn1(){
                    console.log('我是 根实例的 fn1')
                }
            }
        })
    </script>


</body>
</html>